<template>
	<view class="icon-box">
		<view class="icon-item">
			<view class="img-box">
				<image src="../../static/icon/食堂.png" class="img"></image>
			</view>
			<text class="category">第一食堂</text>
		</view>
		<view class="icon-item">
			<view class="img-box">
				<image src="../../static/icon/食堂.png" class="img"></image>
			</view>
			<text class="category">第一食堂</text>
		</view>
		<view class="icon-item">
			<view class="img-box">
				<image src="../../static/icon/水果(1).png" class="img"></image>
			</view>
			<text class="category">第一食堂</text>
		</view>
		<view class="icon-item">
			<view class="img-box">
				<image src="../../static/icon/超市.png" class="img"></image>
			</view>
			<text class="category">第一食堂</text>
		</view>
		<view class="icon-item">
			<view class="img-box">
				<image src="../../static/icon/奶茶小吃.png" class="img"></image>
			</view>
			<text class="category">第一食堂</text>
		</view>
	</view>
</template>

<script>
	import {reqCategory} from '@/common/api.js'
	import {mapState}from 'vuex'
	export default {
		computed: {
			...mapState(['categoryList'])
		},
		name:"tabs",
		data() {
			return {
				
			}
		},
		methods: {
			// 分类
			async category() {
				const res = await reqCategory()
				console.log(res);
				this.categoryList = res.data
			}
			// 
		},
		onLoad() {
			this.category()
			console.log(this.categoryList);
		}
		
	}
</script>

<style lang="scss">
.icon-box {
	padding: 5px;
	display: flex;
	justify-content: space-evenly;
	text-align: center;
	
	.img-box {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid transparent;
		background-color: aqua;
		margin: 10px 0;
		.img {
			width: 65%;
			height: 65%;
			margin-top: 5px;
		}
	}
	.category {
		font-size: 14px;
	}
}
.icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>